<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>   
<body>   
	<header class="mui-bar mui-bar-nav"> 
	    <h1 class="mui-title">首页</h1>   
	</header>    
	<div class="mui-content"> 
		<div id="slider" class="mui-slider" > 
	  <div class="mui-slider-group mui-slider-loop"> 
	    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --> 
	    <div class="mui-slider-item mui-slider-item-duplicate">
	      <a href="#">   
	        <img src="img/lunbo-4.jpg">   
	      </a>   
	    </div>   
	    <!-- 第一张 --> 
	    <div class="mui-slider-item">    
	      <a href="#"> 
	        <img src="img/lunbo-1.jpg">
	      </a>                              
	    </div>  
	    <!-- 第二张 --> 
	    <div class="mui-slider-item">
	      <a href="#">
	        <img src="img/lunbo-2.jpg">
	      </a> 
	    </div>
	    <!-- 第三张 -->
	    <div class="mui-slider-item">
	      <a href="#">
	        <img src="img/lunbo-3.jpg">
	      </a>
	    </div>
	    <!-- 第四张 -->
	    <div class="mui-slider-item">
	      <a href="#">
	        <img src="img/lunbo-4.jpg">
	      </a>
	    </div> 
	    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
	    <div class="mui-slider-item mui-slider-item-duplicate">
	      <a href="#">
	        <img src="http://placehold.it/400x300">
	      </a>
	    </div>  
	  </div>
	  <div class="mui-slider-indicator">
	    <div class="mui-indicator mui-active"></div>
	    <div class="mui-indicator"></div>
	    <div class="mui-indicator"></div>
	    <div class="mui-indicator"></div>
	  </div> 
	</div>
	<!-- <div class="mui-content"> -->
	   <ul class="indexListOne">
		   	<li id="listOne"><img src="img/index-middle-yumaoqiu.png" class="indexicon"></li>  
		   	<li id="listTwo"><img src="img/index-middle-huihua.png" class="indexicon"></li> 
		   	<li id="listThree"><img src="img/index-middle-jiqiren.png" class="indexicon"></li>  
		   	<li id="listFour"><img src="img/index-middle-saiche.png" class="indexicon" ></li> 
	   </ul>
	   <ul class="indexListTwo">  
		   	<li id="listFive"><img src="img/index-middle-huihua.png"  class="indexicon"></li>
		   	<li id="listSix"><img src="img/index-middle-wurenji.png"  class="indexicon"></li>
		   	<li id="listSe"><img src="img/index-middle-zixinche.png"  class="indexicon"></li>  
		   	<li id="listEg"><img src="img/index-middle-zhuoyou.png" class="indexicon"></li>   
	   </ul>   
	<!-- </div> -->     
	<!-- <div class="mui-content"> -->
			<div style="padding: 10px 10px;">  
				<div id="segmentedControl" class="mui-segmented-control"> 
					<a class="mui-control-item mui-active" href="#item1">待办公文（8）</a>
					<a class="mui-control-item" href="#item2">已办公文</a>
					<a class="mui-control-item" href="#item3">全部公文</a>
				</div>
			</div>
			<div>
				<div id="item1" class="mui-control-content mui-active">
					<div id="scroll" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									第一个选项卡子项-1
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-2
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-3
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-4
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-5
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-6
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-7
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-8
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-9
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-10
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-11
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-12
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-13
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-14
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-15
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-16
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-17
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-18
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-19
								</li>
								<li class="mui-table-view-cell">
									第一个选项卡子项-20
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="item2" class="mui-control-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							第二个选项卡子项-1
						</li>
						<li class="mui-table-view-cell">
							第二个选项卡子项-2
						</li>
						<li class="mui-table-view-cell">
							第二个选项卡子项-3
						</li>
					</ul>
				</div>
				<div id="item3" class="mui-control-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							第三个选项卡子项-1
						</li>
						<li class="mui-table-view-cell">
							第三个选项卡子项-2
						</li>
						<li class="mui-table-view-cell">
							第三个选项卡子项-3
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	
	<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.min.js"></script>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	
		var listOne = document.getElementById('listOne');
		var listTwo = document.getElementById('listTwo');
		var listthree = document.getElementById('listThree');
		var listFour = document.getElementById('listFour');
		var listFive = document.getElementById('listFive');
		var listSix = document.getElementById('listSix');
		var listSe = document.getElementById('listSe');
		var listEg = document.getElementById('listEg');
		openPage(listOne,'test.html','test'); 
		mui.init({
				swipeBack: false //启用右滑关闭功能
			});
			(function($) {
				$('#scroll').scroll({
					indicators: false //是否显示滚动条
				});
				var segmentedControl = document.getElementById('segmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						var styleEl = document.querySelector('input[name="style"]:checked');
						var colorEl = document.querySelector('input[name="color"]:checked');
						if (styleEl && colorEl) {
							var style = styleEl.value;
							var color = colorEl.value;
							segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
						}
					}
				});
			})(mui);
		
		
	</script>
</body>
</html>